<template>
  <!-- <div class="fileOperation">
    <el-upload @change="loadExcel" id="uploadBtn">
      <template #trigger>
        <el-button type="primary" color="#eeeeee">
          <template #icon><IEpDownload></IEpDownload></template>上传
        </el-button></template
      >
    </el-upload>
    <el-button type="primary" color="#e7e7e8" @click="downloadExcel">
      <template #icon><IEpUpload></IEpUpload></template>保存
    </el-button>
  </div> -->
  <!-- <input id="uploadBtn" type="file" @change="loadExcel" />-->

  <!-- <div class="excel"> -->
  <div id="luckysheet"></div>
  <!-- </div> -->
</template>
<script lang="ts">
export default {
  // name:"excel"
};
</script>
<script setup lang="ts">
import { exportExcel } from "./export";
import LuckyExcel from "luckyexcel";
const jsonData = ref({});
const loadExcel = (evt: any) => {
  const files = evt.target.files;
  if (files == null || files.length == 0) {
    alert("没有等待导入的文件");
    return;
  }

  let name = files[0].name;
  let suffixArr = name.split("."),
    suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    alert("目前只支持xlsx格式");
    return;
  }
  LuckyExcel.transformExcelToLucky(
    files[0],
    (exportJson: { sheets?: any; info?: any }, luckysheetfile: any) => {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        alert("获取excel文件失败, 当前只支持xls、xlsx文件");
        return;
      }
      console.log("exportJson", exportJson);
      jsonData.value = exportJson;

      window.luckysheet.destroy && (window as any).luckysheet.destroy();

      window.luckysheet.create({
        container: "luckysheet", //luckysheet is the container id
        showinfobar: false,
        data: exportJson.sheets,
        title: exportJson.info.name,
        userInfo: exportJson.info.name.creator,
      });
    }
  );
};
const file = ref("保存文件名");
const downloadExcel = () => {
  exportExcel((window as any).luckysheet.getAllSheets(), file.value);
};

onMounted(() => {
  window.luckysheet.create({
    container: "luckysheet",
    lang: "zh",
    title: "luckysheet",
  });

  document
    .getElementsByClassName("luckysheet-share-logo")[0]
    .addEventListener("click", () => {
      window.open(
        "https://mengshukeji.gitee.io/LuckysheetDocs/zh/guide/#%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4"
      );
    });
});
</script>

<style scoped lang="scss">
.fileOperation {
  width: min-content;
  display: flex;
}

#luckysheet {
  position: relative;
  width: 100%;
  min-width: 350px;
  height: 100%;
  min-height: 400px;
  box-shadow: rgb(159, 156, 156) 0px 0px 10px 1px;
  :deep(.luckysheet) {
    width: 100% !important;

    .luckysheetTableContent {
      width: 100% !important;
    }
    // #luckysheet-wa-editor {
    //   width: calc(100% - 20px) !important;
    // }
    #luckysheet_info_detail {
      .luckysheet_info_detail_back {
        display: none;
      }
      .sheet-name {
        width: 100px;
      }

      #luckysheet_info_detail_update {
        width: 45px;
      }
      #luckysheet_info_detail_save {
        width: 140px;
      }

      @media only screen and (max-width: 600px) {
        .luckysheet-share-logo {
          width: 40px !important;
        }
      }
      @media only screen and (min-width: 600px) {
        .luckysheet-share-logo {
          width: 152px !important;
        }
      }
    }
  }
}
</style>
